<template>
    <div class="contractList">
        <el-form ref="ruleForm" :inline="true" :model="params" class="demo-form-inline">
            <el-form-item label="合同名称：">
                <el-input v-model="params.contractName" placeholder="请输入合同名称"></el-input>
            </el-form-item>
            <el-form-item label="合同状态：">
                <el-select v-model="params.status">
                    <el-option v-for="item in contractStatus" :key="item.code" :label="item.value" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="经办人名称：">
                <el-input v-model="params.contractOperatorName" placeholder="请输入经办人名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
                <el-button type="default" @click="addContract">新增合同</el-button>
                <el-button type="default" @click="isMoreSelect">{{selectMore ? "收起筛选项" : "更多筛选项"}}</el-button>
            </el-form-item>
            <div v-if="selectMore">
                <el-form-item label="合同编号：">
                    <el-input v-model="params.contractCode" placeholder="请输入合同编号"></el-input>
                </el-form-item>
                <el-form-item label="收支类别：">
                    <el-select v-model="params.budgetType" style="width:150px">
                        <el-option v-for="item in budgetTypes" :key="item.code" :label="item.value" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同类型：">
                    <el-select v-model="params.contractType" style="width:150px">
                        <el-option v-for="item in contractTypes" :key="item.code" :label="item.value" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同性质：">
                    <el-select v-model="params.contractNature" style="width:150px">
                        <el-option v-for="item in contractNatrues" :key="item.code" :label="item.value" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同截止日期：">
                    <el-date-picker
                            v-model="time"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="付款方：">
                    <el-input v-model="params.payerName" placeholder="请输入付款方名称"></el-input>
                </el-form-item>
                <el-form-item label="收款方：">
                    <el-input v-model="params.receivablesName" placeholder="请输入收款方名称"></el-input>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData" v-loading="loading" border stripe>
            <el-table-column label="合同名称" prop="contractName" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="合同编号" prop="contractCode" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="收支类别" prop="budgetType" align="center" :formatter="initbudgetcategory"></el-table-column>
            <el-table-column label="合同类型" prop="contractTypeManage.name" align="center"></el-table-column>
            <el-table-column label="合同性质" prop="contractNature" align="center" :formatter="initcontractnature"></el-table-column>
            <el-table-column label="合同状态" prop="status" align="center" :formatter="initcontractStatus"></el-table-column>
            <el-table-column label="付款方" prop="payerName" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="收款方" prop="receivablesName" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="预警提前量(月)" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.contractTypeManage.expirationWarningAdvance}}</span>
                </template>
            </el-table-column>
            <el-table-column label="经办人姓名" prop="contractOperatorName" align="center"></el-table-column>
            <el-table-column label="更新人" prop="updateUserName" align="center"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime" align="center" :formatter="initTime" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="500">
                <template slot-scope="scope">
                    <el-button type="text" size="small" :disabled="(scope.row.status!==0)  && (scope.row.status!==4) && (scope.row.status!==13)&& (scope.row.status!==14)&& (scope.row.status!==15)" @click="editContract(scope.row.id)">
                        编辑
                    </el-button>
                    <el-button type="text" size="small" @click="fApproval(scope.row.id)" :disabled="(scope.row.status!==0)  && (scope.row.status!==3) && (scope.row.status!==4) && (scope.row.status!==8)&&(scope.row.status!=13)&&(scope.row.status!=14)&&(scope.row.status!=15)">
                        发起审批
                    </el-button>
                    <el-button type="text" size="small" @click="contractDetail(scope.row.id)">详情</el-button>
                    <el-button type="text" size="small" :disabled="scope.row.status!==0" @click="delcontract(scope.row.id)">
                        删除
                    </el-button>
                    <el-button type="text" size="small" @click="alvoid(scope.row.id)" :disabled="(scope.row.status!==0) && (scope.row.status!==4)">
                        作废
                    </el-button>
                    <el-button type="text" size="small" @click="goToenterletter(scope.row)" :disabled="(scope.row.contractNature !==0) || (scope.row.contractType !==100002)">
                        进场函管理
                    </el-button>
                    <el-button type="text" size="small" @click="lookprogress(scope.row.id)">查看流程</el-button>
                    <el-button type="text" size="small" :disabled="(scope.row.status !=10) " @click="changeContract(scope.row.id)">
                        变更
                    </el-button>
                    <el-button type="text" size="small" :disabled="(scope.row.historyShowFlag !=1) " @click="changeRecord(scope.row.id)">
                        变更记录
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageNum"
                :page-sizes="[10, 20, 40, 50]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" style="margin-top:30px;">
        </el-pagination>
        <el-dialog title="作废原因" :visible.sync="dialogVisible" width="30%">
            <el-input type="textarea" :rows="3" placeholder="请输入作废原因" v-model.trim="textvoid" maxlength="100"></el-input>
            <div class="btns">
                <el-button type="primary" @click="toVoid">作废</el-button>
                <el-button type="primary" @click="cancelVoid">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'

    export default {
        name: 'contractlist',
        title: '合同签订管理',
        data() {
            return {
                time: "",
                contractStatus: [],
                budgetTypes: [],
                contractTypes: [],
                contractNatrues: [],
                selectMore: false,
                loading: false,
                id: "",//作废id
                params: {
                    contractName: "",//合同名称
                    status: "",//合同状态
                    contractOperatorName: "",//经办人
                    budgetType: "",//收支类别
                    contractCode: "",//合同编号
                    contractType: "",//合同类型
                    contractNature: "",//合同性质
                    payerName: "",//付款方
                    receivablesName: "",//收款方
                    endBeginTime: "",
                    endEndTime: "",
                    pageNum: 1,
                    pageSize: 10
                },
                total: 0,
                dialogVisible: false,
                textvoid: "",//作废内容
                tableData: []
            }
        },
        activated() {
            if(this.$route.params.name) {
                this.params.contractName = this.$route.params.name;
                this.loadData();
            }
        },
        watch: {
            time(val) {
                if (val) {
                    // this.params.endBeginTime=this.getTimeString(this.time[0]);
                    // this.params.endEndTime=this.getTimeString(this.time[1])
                    this.params.endBeginTime = this.time[0]
                    this.params.endEndTime = this.time[1]
                } else {
                    this.params.endBeginTime = ""
                    this.params.endEndTime = ""
                }
            }
        },
        methods: {
            loadData() {
                this.axios.post(api.CONTRACTLIST, this.params).then((res) => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                    }
                }).catch((error) => {
                    console.log(error)
                })
            },
            fApproval(id) {
                this.axios.get(api.CONTRACTAPPROVAL + "/" + id).then((res) => {
                    if (res.data.code == 200) {
                        this.loadData();
                    }
                }).catch((error) => {
                    console.log(error)
                })
            },
            initSelect() {
                this.axios.get(api.INITSELECT).then((res) => {
                    if (res.data.code == 200) {
                        this.contractStatus = res.data.data.contractStatus;
                        this.contractStatus.unshift({"code": "", "value": "全部"})
                        this.budgetTypes = res.data.data.budgetTypes;
                        this.budgetTypes.unshift({"code": "", "value": "全部"})
                        this.contractTypes = res.data.data.contractTypes;
                        this.contractTypes.unshift({"code": "", "value": "全部"})
                        this.contractNatrues = res.data.data.contractNatrues;
                        this.contractNatrues.unshift({"code": "", "value": "全部"})
                    }
                }).catch((error) => {
                    console.log(error)
                })
            },
            query() {
                this.params.pageNum = 1;
                this.params.pageSize = 10;
                this.loadData();
            },
            warn(msg) {
                this.$alert(msg, '提示', {
                    type: 'error',
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            },
            toVoid() {
                if (this.textvoid == "") {
                    this.warn("请输入作废内容");
                    return
                } else {
                    this.axios.post(api.INVALID, {contractId: this.id, invalidReason: this.textvoid}).then((res) => {
                        if (res.data.code == 200) {
                            this.$alert('操作成功', '提示', {
                                confirmButtonText: '确定',
                                type: 'success',
                            }).then(() => {
                                this.dialogVisible = false;
                                this.loadData();
                                this.textvoid = ""
                            }).catch(() => {
                                this.dialogVisible = false;
                                this.textvoid = ""
                            })
                        }
                    }).catch((error) => {
                        console.log(error)
                    })
                }
            },
            cancelVoid() {
                this.dialogVisible = false;
                this.textvoid = ""
            },
            addContract() {
                this.$router.push({
                    path: "/contractaddoredit"
                })
            },
            isMoreSelect() {
                this.selectMore = !this.selectMore
            },
            resetForm() {
                this.params.contractName = "";
                this.params.status = "";
                this.params.contractOperatorName = "";
                this.params.budgetType = "";
                this.params.contractCode = "";
                this.params.contractType = "";
                this.params.contractNature = "";
                this.params.payerName = "";
                this.params.receivablesName = "";
                this.params.endBeginTime = "";
                this.params.endEndTime = "";
                this.time = "";
            },
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.params.pageNum = val;
                this.loadData();
            },
            delcontract(id) {
                this.$confirm("此操作将删除该条记录, 是否继续?", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get(api.DELETECONTRACT + "/" + id).then((res) => {
                        if (res.data.code == 200) {
                            this.$alert("操作成功", '提示', {
                                type: 'success ',
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.loadData();
                                }
                            });
                        }
                    })
                }).catch(() => {
                })
            },
            getTimeString(timestamp) {
                if (timestamp) {
                    const time = new Date(timestamp)
                    let dateStr = ''
                    const year = time.getFullYear()
                    const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                    const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                    dateStr = year + '-' + month + '-' + day
                    let timeStr = ''
                    const hours = time.getHours()
                    const hh = String(hours).length === 1 ? '0' + hours : hours
                    const minutes = time.getMinutes()
                    const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                    const seconds = time.getSeconds()
                    const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                    timeStr = `${hh}:${mm}:${ss}`
                    // timeStr = `${hh}:${mm}`
                    return dateStr + ' ' + timeStr
                    // return dateStr
                } else {
                    return ''
                }
            },
            initTime(row, column, cellValue, index) {
                return this.getTimeString(cellValue)
            },
            initcontractStatus(row, column, cellValue, index) {
                if (cellValue == 0) {
                    return "新增"
                }
                // if(cellValue==1){return "己提交审批"}
                if (cellValue == 2) {
                    return "会签中"
                }
                if (cellValue == 3) {
                    return "会签通过"
                }
                if (cellValue == 4) {
                    return "会签不通过"
                }
                if (cellValue == 5) {
                    return "终止中"
                }
                if (cellValue == 6) {
                    return "已终止"
                }
                if (cellValue == 7) {
                    return "变更中"
                }
                if (cellValue == 8) {
                    return "已变更"
                }
                if (cellValue == 9) {
                    return "已作废"
                }
                if (cellValue == 10) {
                    return "已发布"
                }
                if (cellValue == 13) {
                    return "变更未生效"
                }
                if (cellValue == 14) {
                    return "签订复核不通过"
                }
                if (cellValue == 15) {
                    return "变更复核不通过"
                }
            },
            initbudgetcategory(row, column, cellValue, index) {
                if (cellValue == 0) {
                    return "收款类"
                }
                if (cellValue == 1) {
                    return "支出类"
                }
            },
            initcontractnature(row, column, cellValue, index) {
                if (cellValue == 0) {
                    return "框架合同"
                }
                if (cellValue == 1) {
                    return "主合同"
                }
                if (cellValue == 2) {
                    return "分合同"
                }
            },
            goToenterletter(value) {
                let enterletterData = {};
                enterletterData.contractName = value.contractName;
                enterletterData.contractName = value.contractName;
                enterletterData.contractCode = value.contractCode;
                enterletterData.budgetType = value.budgetType;
                enterletterData.contractType = value.contractType;
                enterletterData.contractNature = value.contractNature;
                enterletterData.contractEndTimeStr = value.contractEndTimeStr;
                sessionStorage.setItem("enterletterData", JSON.stringify(enterletterData));
                this.$router.push({
                    path: "/enterletter"
                })
            },
            alvoid(id) {
                this.dialogVisible = true;
                this.id = id;
            },
            contractDetail(contractId) {//合同详情
                this.$router.push({
                    path: "/contractaddoredit",
                    query: {
                        type: "look",
                        contractId: contractId
                    }
                })
            },
            editContract(contractId) {//编辑合同
                this.$router.push({
                    path: "/contractaddoredit",
                    query: {
                        type: "edit",
                        contractId: contractId
                    }
                })
            },
            changeContract(contractId) {//变更合同
                this.$router.push({
                    path: "/contractaddoredit",
                    query: {
                        type: "change",
                        contractId: contractId
                    }
                })
            },
            lookprogress(contractId) {//查看流程
                this.$router.push({
                    path: "/lookprogress",
                    query: {
                        contractId: contractId
                    }
                })
            },
            changeRecord(contractId) {//查看变更记录
                this.$router.push({
                    path: "/changerecord",
                    query: {
                        contractId: contractId
                    }
                })
            }
        },
        activated(){
            this.loadData();
            this.initSelect();
        },
        mounted() {
            this.loadData();
            this.initSelect();
        }
    }
</script>

<style lang="stylus">
    .contractList {
        .el-table .cell {
            white-space: nowrap !important;
            .name-wrapper {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .btns {
            text-align: center;
            margin-top: 30px;
        }
    }

</style>
